body{
    /*手机上点击时不会有白块*/
    -webkit-tap-highlight-color:rgba(0,0,0,0)!important;
    font-size: 0;
    font-family: "微软雅黑";
    background: -webkit-linear-gradient(top,  #f84b38 0%,#feb817 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #f84b38 0%,#feb817 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    margin-bottom: 1.1rem;

}
/*图标不会被遮挡*/
[flex], [flex]>*, [flex]>[flex] {
    overflow: visible;
}
button{
    font-family: "微软雅黑";
}

/*头部*/
header{
    background-image: url("../img/bg@2x.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 8.92rem;
    width: 100%;
    position: relative;
}
header>button{
    width: 4.22rem;
    height: 1.12rem;
    background: url("../img/button@2x.png") no-repeat center ;
    background-size: cover;
    position: absolute;
    bottom: .28rem;
}

/*第一层*/
.f1>li{
    width: 3.36rem;
    height: 2.4rem;
    display: inline-block;
    margin: 0 0 0.2rem .26rem;
}

.f1>li:first-child{
    background: url("../img/tik1@2x.png") no-repeat center;
    background-size: cover;
}
.f1>li:nth-child(2){
    background: url("../img/tik2@2x.png") no-repeat center;
    background-size: cover;
}
.f1>li:nth-child(3){
    background: url("../img/tik3@2x.png") no-repeat center;
    background-size: cover;
    margin-bottom: 0;
}
.f1>li:last-child{
    background: url("../img/tik1@2x.png") no-repeat center;
    background-size: cover;
    margin-bottom: 0;
}

/*第二层*/
.title{
    width: 5.58rem;
    height: .41rem;
    background: url("../img/title1@2x.png") no-repeat center;
    background-size: cover;
    margin: .3rem  auto .34rem;

}
.pic{
    width: 6.7rem;
    height: 13.46rem;
    background-color: white;
    border-radius: 40px;
    margin: 0 auto;
}
.pic>img{
    width: 5.27rem;
}

/*第三层*/
.title2{
    width: 6.62rem;
    height: .85rem;
    background: url("../img/title2@2x.png") no-repeat center;
    background-size: cover;
    margin: .1rem  auto .1rem;

}
.f3{
    width: 6.7rem;
    height: 6.12rem;
    background-color: white;
    border-radius: 40px;
    margin: 0 auto;
    padding-top: .32rem;
}
.f3>li{
    display: inline-block;
    width: 50%;
    height: 2.89rem;
    text-align: center;
}
.f3>li>div{
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
}
.f3>li:first-child>div{
    background: url("../img/icon1@2x.png") no-repeat center;
    background-size: cover;
}
.f3>li:nth-child(2)>div{
    background: url("../img/icon2@2x.png") no-repeat center;
    background-size: cover;
}
.f3>li:nth-child(3)>div{
    background: url("../img/icon3@2x.png") no-repeat center;
    background-size: cover;
}
.f3>li:last-child>div{
    background: url("../img/icon4@2x.png") no-repeat center;
    background-size: cover;
}
.f3>li>h1{
    font-size: .3rem;
    color: #ea2100;
    margin: .2rem 0 .14rem;
}
.f3>li>p{
    font-size: .26rem;
    color: #333333;
}

/*第四层开始*/
.title3{
    width: 7.47rem;
    height: .91rem;
    background: url("../img/title3@2x.png") no-repeat center;
    background-size: cover;
    margin: .07rem  auto .07rem;

}
.f4{
    width: 6.7rem;
    height: 1rem;
    border-radius: 1rem;
    background: #ff4733;
    margin: 0 auto;
    box-shadow: .08rem .08rem .15rem .1rem rgba(188,32,14,.2) inset;
}
.f4>div>div>span{
    font-size: .3rem;
    color: white;
}
.f4>div>div>span>span{
    font-size: .3rem;
    color: #fff714;
}
/*人像*/
.people{
    font-size: .28rem;
    color: white;
    margin: .28rem 0;
    text-align: center;
}
.user{
    position: relative;
    padding: 0 .84rem .84rem;
    font-size: 0;
    height: .68rem;
    margin-bottom: .46rem;
}

.round{
    width: .68rem;
    height: .68rem;
    border: 1px solid white;
    border-radius: .68rem;
    position: absolute;
}
.user>li:first-child{
    left: .84rem;
    background: url("../img/user1@2x.png") no-repeat center;
    background-size: cover;
}
.user>li:nth-child(2){
    left:1.34rem;
    z-index: 1;
    background: url("../img/user2@2x.png") no-repeat center;
    background-size: cover;

 }
.user>li:nth-child(3){
    left: 1.84rem;
    z-index: 2;
    background: url("../img/user3@2x.png") no-repeat center;
    background-size: cover;

}
.user>li:nth-child(4){
    left: 2.34rem;
    z-index: 3;
    background: url("../img/user4@2x.png") no-repeat center;
    background-size: cover;

}
.user>li:nth-child(5){
    left:2.84rem;
    z-index: 4;
    background: url("../img/user5@2x.png") no-repeat center;
    background-size: cover;

}
.user>li:nth-child(6){
    left:3.34rem;
    z-index: 5;
    background: url("../img/user6@2x.png") no-repeat center;
    background-size: cover;

}
.user>li:nth-child(7){
    left:3.84rem;
    z-index: 6;
    background: url("../img/user7@2x.png") no-repeat center;
    background-size: cover;

}
.user>li:nth-child(8){
    left:4.34rem;
    z-index: 7;
    background: url("../img/user8@2x.png") no-repeat center;
    background-size: cover;

}
.user>li:nth-child(9){
    left:4.84rem;
    z-index: 8;
    background: url("../img/user9@2x.png") no-repeat center;
    background-size: cover;

}
.user>li:nth-child(10){
    left:5.34rem;
    z-index: 9;
    background: url("../img/user10@2x.png") no-repeat center;
    background-size: cover;
}
.user>li:last-child{
    font-size: 0.8rem;
    color: white;
    position: absolute;
    left: 6.2rem;
    list-style: none;
    bottom: .26rem;
}

/*底部*/
footer{
    height: 1.1rem;
    background-color: #f7503e;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: 0 .2rem;
}
.gift{
    display: inline-block;
    width: 1.06rem;
    height: .86rem;
    background: url("../img/gift@2x.png") no-repeat center;
    background-size: cover;

}
.phone{
    width: 4rem;
    height: .7rem;
    background-color: white;
    border-radius: 8px;
    display: inline-block;
    margin: 0 .28rem;
}
.phone>i{
    font-size: .38rem;
    color: #646464;
    width: .66rem;
    display: inline-block;
}
.phone>input{
    background: transparent;
    width: 3.34rem;
    height: .7rem;
    font-size: .26rem;
}
.phone>input::-webkit-input-placeholder{
    color: #8f8f8f;
}
footer>button{
    font-size: .24rem;
    color: white;
    width: 1.6rem;
    height: .7rem;
    border-radius: 8px;
    background: -webkit-linear-gradient(top,  #ffdd82 0%,#feb817 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffdd82 0%,#feb817 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    box-shadow: 0 .04rem .04rem .08rem rgba(212,53,36,.22);

}
footer>button:active{
    transform: scale(.96);
}
